<template>
    <div>
        <navs :navtitle="titles"></navs>
        <div class="register-from">
            <div class="register-item">
                <img class="left-icon" src="../assets/ren.png" alt="" v-if="nickname.length>0">
                <img class="left-icon" src="../assets/nicheng@2x.png" alt="" v-else>
                <input class="ipt" type="text" placeholder="昵称(2-20字符,限制中文、字母、数字)" v-model="nickname" @focus="changefi('nickname')" @blur="hidden">
                <img class="right-icon" src="../assets/Page 1@2.88x.png" alt="clear" v-show="nickname.length>0&&fious=='nickname'" @touchend="clearIpt('nickname')">
            </div>
            <div class="register-item">
                <img class="left-icon" src="../assets/shoujix.png" alt="" v-if="phone.length>0">
                <img class="left-icon" src="../assets/shouji@2x.png" alt="" v-else>
                <input class="ipt" type="text" v-model="phone" @focus="changefi('phone')" @blur="hidden" placeholder="请输入手机号码">
                <img class="right-icon" src="../assets/Page 1@2.88x.png" alt="" v-show="phone.length>0&&fious=='phone'" @touchend="clearIpt('phone')">
            </div>
             <div class="register-item">
                <img class="left-icon" src="../assets/yanzheng.png" alt="" v-if="code.length>0">
                <img class="left-icon" src="../assets/yanzhengma@2x.png" alt="" v-else>
                <input class="ipt" type="text" v-model="code" placeholder="请输入短信验证码">
                <span class="code" v-if="obtain" @click="encapsulation">获取验证码</span>
                <span class="code" v-else>{{time}}s重新获取</span>
            </div>
            <div class="register-item">
                <img class="left-icon" src="../assets/wanc.png" alt="" v-if="password.length>0">
                <img class="left-icon" src="../assets/xinmima@2x.png" alt="" v-else>
                <input class="ipt" v-bind="{type: che ? 'password':'text'}"  v-model="password" placeholder="新密码(6-15位数字、字母组合)" @focus="changefi('password')" @blur="hidden">
                <img class="right-icon" src="../assets/Page 1@2.88x.png" alt="clear" v-show="password.length>0&&fious=='password'" @touchend="clearIpt('password')">
                <img class="yan" src="../assets/yanjingbi.png" alt v-if="che&&password.length>0" @click="changer">
                <img class="manyan" src="../assets/mimayan.png" alt=""  v-else-if="password.length>0" @click="changer">
            </div>
            <div class="register-item">
                <img class="left-icon" src="../assets/yaoqing_red.png" alt="" v-if="confirm.length>0">
                <img class="left-icon" src="../assets/yaoqingma@2x.png" alt="" v-else>
                <input class="ipt" type="text" v-model="confirm" placeholder="请输入邀请码(非必填)" maxlength="6" @focus="changefi('confirm')" @blur="hidden">
                <img class="right-icon" src="../assets/Page 1@2.88x.png" alt="clear" v-show="confirm.length>0&&fious=='confirm'" @touchend="clearIpt('confirm')">
            </div>
        </div>
        <div class="next" v-if="nickname.length>0&&phone.length>0&&code.length>0&&password.length>0" @click="encapsulation2">下一步，商户认证</div>
        <div class="next next-2" v-else>下一步，商户认证</div>
    </div>
</template>
<script>
import navs from '@/components/Navbar'
import { setTimeout, setInterval, clearInterval } from 'timers';
import qs from 'qs'
import { constants } from 'crypto';
export default {
    components:{
        navs,
    },
    data(){
        return{
            titles:'注册',
            nickname:'',
            phone:'',
            code:'',
            password:'',
            confirm:'',
            obtain:true,
            time:5,
            fious:'',
            che:true
        }
    },
    methods:{
        changer() {
            this.che = !this.che;
        },
        changefi(val){
            this.fious=val
        },
        hidden(){
            this.fious=''
        },
        clearIpt(val){
            this[val]=''
        },
        again(){
            this.obtain=false;
            let that=this;
            let timer=setInterval(function(){
                that.time--;
                if(that.time===0){
                    clearInterval(timer)
                    that.obtain=true;
                    that.time=5;    
                }
            },1000)
        },
        encapsulation(){
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/user/sms',qs.stringify({
               phone:this.phone,
            }))
            .then(res=>{
                console.log(res)
                if(res.data.status.statusCode === 0){
                    console.log('已发送')
                    this.again();
                }else{
                    console.log(res.data.status.statusReason)
                }
            })
            .catch(err=>{
                console.log(err)
            })
      },
      encapsulation1(){
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/user/register',{
               nickName:this.nickname,
               phone:this.phone,
               passWord:this.password,
            })
            .then(res=>{
                console.log(res)
                if(res.data.status.statusCode === 0){
                    console.log('注册成功')
                }else{
                    console.log(res.data.status.statusReason)
                }
            })
            .catch(err=>{
                console.log(err)
            })
      },
      encapsulation2(){
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/user/smsValid',qs.stringify({
                phone:this.phone,
                code:this.code
            }))
            .then(res=>{
                console.log(res)
                if(res.data.status.statusCode === 0){
                    this.encapsulation1();
                }else{
                    console.log(res.data.status.statusReason)
                }
            })
            .catch(err=>{
                console.log(err)
            })
      },
    },
    created(){                          
        // this.encapsulation2();
    }
    
}
</script>
<style scoped lang="scss">
    .register-from{
        padding: 0.59rem 0.3rem 0.3rem 0.31rem;       
        .register-item{
            position: relative;
            display: flex;
            align-items: center;
            height: 0.42rem;
            margin-top: 0.07rem;
            .left-icon{
                width: 0.16rem;
                height: 0.16rem;
                margin-right:0.17rem; 
            }
            .ipt{
                flex: 1;
                border: none;
                outline: none;
            }
            .right-icon{
                width: 0.14rem;
                height: 0.14rem;
                padding: 0.14rem;
            }
            .code{
                font-size: 0.14rem;
                color: aqua;
            }
            .manyan{
            width: 0.17rem;
            height: 0.18rem;
            padding-right: 0.1rem;
            }
            .yan {
            width: 0.4rem;
            height: 0.4rem;
            }
            &::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #ccc;
            transform: scale(1,0.5)
        } 
        }
        
    }
    .next{
        margin: 0 auto;
        width:3.11rem;
        height: 0.44rem;
        color: #fff;
        background: #DD3333;
        border-radius: 4px;
        line-height: 0.44rem;
        text-align: center;
    }
    .next-2{
        opacity: 0.5;
    }
</style>
